<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String pathfile = path+"/view";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>欢迎注册Ly个人博客</title>
	<link href="<%=pathfile %>/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/animate.css" rel="stylesheet">
    <link href="<%=pathfile %>/bac/css/style.css" rel="stylesheet">
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    
    <style type="text/css">
    .modal-header {
	    padding: 15px 15px;
	    text-align: center;
	}
    </style>
</head>
<body class="gray-bg">

    <div class="middle-box text-center loginscreen   animated fadeInDown">
        <div>
            <div>

                <h1 class="logo-name">Ly</h1>

            </div>
            <h3>欢迎注册 Ly</h3>
            <p>创建一个Ly新账户</p>
            <div class="wrapper wrapper-content animated fadeInRight">
	            <div class="row">
		            <div class="ibox-content">
		                <form class="form-horizontal m-t"  id="reg-form" novalidate="novalidate">
		                    <div class="form-group">
		                        <label class="col-sm-3 control-label">E-mail：</label>
		                        <div class="col-sm-9">
		                            <input id="email" name="user_mail" class="form-control" type="email">
		                        </div>
		                    </div>
		                    <div class="form-group">
		                        <label class="col-sm-3 control-label">用户名：</label>
		                        <div class="col-sm-9">
		                            <input id="username" name="user_name" class="form-control" type="text" aria-required="true" aria-invalid="true">
		                        </div>
		                    </div>
		                    <div class="form-group">
		                        <label class="col-sm-3 control-label">密码：</label>
		                        <div class="col-sm-9">
		                            <input id="password" name="user_pwd" class="form-control" type="password">
		                        </div>
		                    </div>
		                    <div class="form-group">
		                        <label class="col-sm-3 control-label">确认密码：</label>
		                        <div class="col-sm-9">
		                            <input id="confirm_password"  class="form-control" type="password">
		                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
		                        </div>
		                    </div>
		                    
		                    <div class="form-group">
		                        <div class="col-sm-10 col-sm-offset-1"> <!-- col-sm-offset-2 -->
		                            <div class="checkbox">
		                                <label>
		                                    <input type="checkbox" checked = "checked" class="checkbox" id="agree" > 我已经认真阅读并同意《Ly使用协议》
		                                </label>
		                            </div>
		                        </div>
		                    </div>
		                    <!-- 选中 btn-primary -->
			                <button id="btn_reg_submit" type="button" class="btn btn-white block width-80 m-b">注 册</button>
			                <p class="text-muted text-center"><small>已经有账户了？</small><a href="toLoginPage">点此登录</a>
			                </p>
		                </form>
		            </div>
		        </div>
	       </div>
        </div>
    </div>
		<div class="modal inmodal" id="reg_success_modal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated flipInY">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
						<span class="sr-only">Close</span></button>
					<h5 class="modal-title">注册成功</h5>
					<small class="font-bold">这里可以显示副标题。</small>
				</div>
				<small class="font-bold">
					<div class="modal-body">
						<p>
							<strong>H+</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p></div>
					<div class="modal-footer">
						<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">登录(<span id="to_login_time"></span>s)</button></div>
				</small>
			</div>
			<small class="font-bold"></small>
		</div>
		<small class="font-bold"></small>
	</div>
	<!-- 全局js -->
    <script src="<%=pathfile %>/rec/js/jquery-1.8.3.min.js"></script>
    <script src="<%=pathfile %>/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- iCheck -->
    <script src="<%=pathfile %>/plugins/iCheck/icheck.min.js"></script>
    
        <!-- 自定义js -->
    <script src="<%=pathfile %>/bac/js/async-ajax.js"></script>
    <%-- <script src="<%=pathfile %>/bac/js/content.js"></script> --%>

    <!-- jQuery Validation plugin javascript-->
    <script src="<%=pathfile %>/plugins/validate/jquery.validate.min.js"></script>
    <script src="<%=pathfile %>/plugins/validate/messages_zh.min.js"></script>
    
    
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
        
        
        $(function(){
        	
        	//点击事件
        	$("#agree").click(function(){
        		agreeChange();
        	})
        	$("#btn_reg_submit").click(function(){
        		formSubmit();
        	})
        	
        	
        	
        	
        	//初始化方法
        	//默认选中
        	agreeChange();
        })
        
        
        function agreeChange(){
        	var checked = $("#agree").attr("checked"); 
    		if(checked=="checked"){
    			$("#btn_reg_submit").removeClass("btn-white");
    			$("#btn_reg_submit").addClass("btn-primary");
    		}else{
    			$("#btn_reg_submit").addClass("btn-white");
    			$("#btn_reg_submit").removeClass("btn-primary");
    		}
        }
        
        function setTime(n){
        	if(n>0){
                $("#to_login_time").text(n);
                n--;
                setTimeout("setTime("+n+")",1000)
            }else{
                window.location.href = "toLoginPage";
            }
        } 
        
        
        function formSubmit(){
        	var checked = $("#agree").attr("checked");
    		if(checked=="checked"){
    			var formVal = getFormValue("reg-form");
    			console.log(formVal);
    			var reqStr = JSON.stringify(formVal);
    			var result = doPost("registerIn", reqStr);
    			if(result.detail.code == "200"){
    				$("#reg_success_modal").modal("show");
        			setTime(5);
    			}
    		}
        }
    </script>
</body>
</html>